<template>
    <div class="homePage">
        <el-carousel indicator-position="outside" class="carousel">
            <el-carousel-item v-for="(item, index) in imglist" :key="index" class="carousel1">
                <img :src="'http://101.132.181.9:3000/' + item.imgPath" alt="" width="100%" height="500px">
            </el-carousel-item>
        </el-carousel>
        <div>
            <!-- 手机 -->
            <div>
                <p style="font-size: 25px; margin: 20px 0;">手机</p>
                <div class="header">
                    <div class="left">
                        <img src="../assets/imgs/phone.png" alt="" height="100%" />
                    </div>
                    <div class="right">
                        <ul>
                            <li v-for="(item, index) in list" :key="index" @click="detailsPage(item)">
                                <img :src="'http://101.132.181.9:3000/' + item.product_picture" class="img">
                                <div class="div">
                                    <p>{{ item.product_name }}</p>
                                    <p class="text" style="font-size: 14px; color: #b0b0b0;">{{ item.product_title }}
                                    </p>
                                    <p><span style="font-size: 16px; margin-right: 5px; color: #ff6700;">{{
                                            item.product_selling_price
                                    }}</span><s style="font-size: 16px; color: #b0b0b0;">{{ item.product_price}}</s></p>
                                </div>
                            </li>
                            <li class="liu1"><span class="liu" @click="$router.push('/goods')">浏览更多>></span> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 家电 -->
            <div>
                <p style="font-size: 25px; margin: 20px 0;">家电</p>
                <div class="header">
                    <div class="left left1">
                        <img src="../assets/imgs/小米净水器.png" alt="" height="100%" />
                        <img src="../assets/imgs/小米扫地机器人.png" alt="" height="100%" />
                    </div>
                    <div class="right">
                        <ul>
                            <li v-for="(item, index) in list1" :key="index" @click="detailsPage(item)">
                                <img :src="'http://101.132.181.9:3000/' + item.product_picture" class="img">
                                <div class="div">
                                    <p>{{ item.product_name }}</p>
                                    <p class="text" style="font-size: 14px; color: #b0b0b0;">{{ item.product_title }}
                                    </p>
                                    <p><span style="font-size: 16px; margin-right: 5px; color: #ff6700;">{{
                                            item.product_selling_price
                                    }}</span><s style="font-size: 16px; color: #b0b0b0;">{{ item.product_price}}</s></p>
                                </div>
                            </li>
                            <li class="liu1"><span class="liu" @click="$router.push('/goods')">浏览更多>></span> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 配件 -->
            <div>
                <p style="font-size: 25px; margin: 20px 0;">配件</p>
                <div class="header">
                    <div class="left left1">
                        <img src="../assets/imgs/小米自动洗手机.png" alt="" height="100%" />
                        <img src="../assets/imgs/蓝牙耳机.png" alt="" height="100%" />
                    </div>
                    <div class="right">
                        <ul>
                            <li v-for="(item, index) in list2" :key="index" @click="detailsPage(item)">
                                <img :src="'http://101.132.181.9:3000/' + item.product_picture" class="img">
                                <div class="div">
                                    <p>{{ item.product_name }}</p>
                                    <p class="text" style="font-size: 14px; color: #b0b0b0;">{{ item.product_title }}
                                    </p>
                                    <p><span style="font-size: 16px; margin-right: 5px; color: #ff6700;">{{
                                            item.product_selling_price
                                    }}</span><s style="font-size: 16px; color: #b0b0b0;">{{ item.product_price}}</s></p>
                                </div>
                            </li>
                            <li class="liu1"><span class="liu" @click="$router.push('/goods')">浏览更多>></span> </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { carousel, centerlist,remen } from "@/api/api.js"
export default {
    data() {
        return {
            imglist: [],
            categoryName: [
                { categoryName: '手机' },
                { categoryName: '保护套' },
                { categoryName: '电视机' },
                { categoryName: '充电器' },
                { categoryName: "空调" }
            ],
            list: [],//手机
            list1: [],//保护套
            list2: [],//电视机
            list3: [],//充电器
            list4: [],//空调
        }
    },
    methods: {
        image() {
            carousel({ user_id: 4878 }).then((res) => {
                this.imglist = res.carousel;
            });
        },
        getlist() {
            centerlist({ categoryName: '手机' }).then(res => {
                this.list = res.Product
                // console.log(res.Product);
            })
            remen({ categoryName:["保护套", "保护膜", "充电器", "充电宝"] }).then(res => {
                this.list2 = res.Product
            })
            remen({ categoryName:["电视机", "空调", "洗衣机"] }).then(res => {
                this.list1 = res.Product
            })
        },
        detailsPage(item){
            this.$router.push('/detailsPage')
            this.$store.commit('detailsPage',item.product_id)
        }
    },
    computed: {},
    components: {},
    created() {
        this.image(),
            this.getlist()
    },
}
</script>
<style lang="scss" scoped>
.homePage {
    width: 100%;
    background: #f5f5f5;

    .carousel {
        height: 400px;

        .carousel1 {
            height: 400px;
        }
    }

    .header {
        height: 615px;
        display: flex;

        .left {
            flex: 1.5;

            img {
                width: 100%;
            }
        }
        .left1{
            img{
                height: 46%;
                margin-top: 10px;
            }
        }

        .right {
            flex: 7.9;

            ul {
                display: flex;
                flex-wrap: wrap;

                .img {
                    width: 70%;
                    height: 60%;
                    display: block;
                    margin: 0 auto;
                }

                li {
                    width: 238px;
                    height: 290px;
                    margin-left: 20px;
                    margin-top: 10px;
                    background: #fff;

                    .text {
                        margin: 15px 0;
                    }

                    p {
                        text-align: center;
                        font-size: 16px;
                    }

                    .div {
                        margin-top: 20px;
                    }
                }

                .liu1 {
                    text-align: center;
                    line-height: 290px;
                }

                .liu:hover {
                    color: #ff6700;
                    cursor: pointer;
                }

                li:hover {
                    box-shadow: 5px 5px 20px #c0bcbc;
                    transition: .4s;
                }
            }
        }
    }
}
</style>